//  切换
let a1 = document.querySelector('.register a');
let a2 = document.querySelector('.login a');
let login = document.querySelector('.login')
let register = document.querySelector('.register')
a2.onclick = function () {
    login.style.display = 'none'
    register.style.display = 'block'
}
a1.onclick = function () {
    login.style.display = 'block'
    register.style.display = 'none'
}

//  效验input
let inp1 = document.querySelector('.register [name =username]')
let inp2 = document.querySelector('.register [name =password]')
let inp3 = document.querySelector('.login [name=username]')
let inp4 = document.querySelector('.login [name=password]')


function verifyIuput(ele, txt1, reg, txt2) {
    // 绑定事件
    ele.onkeyup = function () {
        if (this.value == "") {
            this.nextElementSibling.style.display = 'block'
            this.nextElementSibling.innerHTML = txt1
            return; // 内容位空退出效验
        } else {
            this.nextElementSibling.style.display = 'none'
            this.nextElementSibling.innerHTML = ''
            // 如果这里写return 因为满足第一个条件,不一定满足第二个
        }
        // 长度效验
        if (reg.test(this.value)) {
            // 通过效验就隐藏span
            this.nextElementSibling.style.display = 'none'
            this.nextElementSibling.innerHTML = ''
        } else {
            //  未通过效验,就会显示span 设置内容
            this.nextElementSibling.style.display = 'block'
            this.nextElementSibling.innerHTML = txt2
        }
    }
}
verifyIuput(inp1, '用户名不能为空!', /^\S{2,15}$/, '用户名必须到2~15位之间')
verifyIuput(inp2, '密码不能为空!', /^\S{6,15}$/, '密码必须到6~15位之间')
verifyIuput(inp3, '用户名不能为空!', /^\S{2,15}$/, '用户名必须到2~15位之间')
verifyIuput(inp4, '密码不能为空!', /^\S{6,15}$/, '密码必须到6~15位之间')
// 注册界面
let forml = document.querySelector('.register form')
forml.addEventListener('submit', function (e) {
    // 阻止默认提交
    e.preventDefault()
    // 发送Ajax
    axios({
            method: 'POST',
            url: '/api/register',
            // 如果我们严格传递 a=1&b=2&c=3, $(this0).serinlize()
            // data:$(this0).serinlize()
            // 如果传递json类型也可以,就可以单独获取
            data: {
                username: inp1.value,
                password: inp2.value
            }
        })
        .then(({
            data: res
        }) => {
            // // 判断状态码是否位1
            // if (res.code == 1) {
            //     return toastr.warning(res.message)
            // }
            // 成功
            if (res.code == 0) {
                // 成功提示
                toastr.success('恭喜你,注册用户成功!')
                forml.reset(); //   清空表单,跳转模块
                a1.click(); // 直接触发a连接点击事件,执行逻辑
            }
        });
})
// 登录界面
let form2 = document.querySelector('.login form')
form2.addEventListener('submit', function (e) {
    e.preventDefault()
    axios({
            method: 'POST',
            url: '/api/login',
            // 如果我们严格传递 a=1&b=2&c=3, $(this0).serinlize()
            // data:$(this0).serinlize()
            // 如果传递json类型也可以,就可以单独获取
            data: {
                username: inp3.value,
                password: inp4.value
            }
        })
        .then(({
            data: res
        }) => {
            // // 判断状态码是否位1
            // if (res.code == 1) {
            //     return toastr.warning(res.message)
            // }
            // 成功
            if (res.code == 0) {
                // 成功提示
                toastr.success('恭喜你,登录成功!');
                // 跳转首页-以HTML为主
                location.href = './index.html'
                // 保存token,后面Ajax要用
                localStorage.setItem('token', res.token)
            }
        });
})